<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 添加按钮 -->
        <el-button type="success" class="addbtn" @click="addQuestion">
          <i class="el-icon-edit"></i>
          新增试题</el-button
        >
        <!-- 筛选表单 -->
        <search-question :param="params" @searchQst="getQuestionlist" />

        <!-- 提示 -->
        <el-alert type="info" show-icon :closable="false">
          数据共 {{ total }} 条
        </el-alert>

        <!-- 表格 -->
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column prop="questionType" label="题型"> </el-table-column>
          <el-table-column prop="question" label="题干" width="180">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="difficulty" label="难度"> </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" plain @click="showQstDia(row)">
                <i class="el-icon-view"></i>
              </el-button>
              <el-button type="success" plain @click="editQst(row)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="danger" plain @click="delQst(row)">
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button type="warning" plain @click="addChoosen(row)">
                <i class="el-icon-check"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 翻页 -->
        <el-row type="flex" justify="end">
          <el-col :span="12" style="position: relative; height: 30px">
            <el-pagination
              style="position: absolute; right: 0"
              background
              :page-sizes="[2, 5, 10, 20, 50]"
              layout="prev, pager, next, sizes,jumper"
              :total="total"
              :page-size="params.pagesize"
              :current-page="params.page"
              @size-change="changepagesize"
              @current-change="changepage"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 题目预览弹层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="showQst"
      style="width: 1700px"
      @close="closeQstDia"
    >
      <el-description>
        <!-- 详情 -->
        <el-row>
          <el-description-item label="题型">
            {{ getDifficulty(questionType, questionDetail.questionType) }}题
          </el-description-item>
          <el-description-item label="编号">
            {{ questionDetail.id }}
          </el-description-item>
          <el-description-item label="难度">
            {{ getDifficulty(difficulty, questionDetail.difficulty) }}
          </el-description-item>
          <el-description-item label="标签">
            {{ questionDetail.tags }}
          </el-description-item>
        </el-row>
        <el-row>
          <el-description-item label="学科">
            {{ questionDetail.subjectName }}
          </el-description-item>
          <el-description-item label="目录">{{
            questionDetail.directoryName
          }}</el-description-item>
          <el-description-item label="方向">{{
            questionDetail.direction
          }}</el-description-item>
        </el-row>
        <!-- 横线 -->
        <el-row>
          <hr />
        </el-row>
        <!-- 题 -->
        <el-row>
          <el-description-item label="题干" :span="intgcol">
            <!-- 题干 -->
            <div v-html="questionDetail.question" style="color: blue"></div>
            <!-- 选项提示 -->
            <div
              v-if="questionDetail.questionType !== '3'"
              style="margin-bottom: 5px; margin-top: 10px"
            >
              {{ getDifficulty(questionType, questionDetail.questionType) }}题
              选项:(以下选中为正确答案)
            </div>
            <!-- 单选选项 -->
            <div v-if="questionDetail.questionType === '1'">
              <el-radio-group :value="radio">
                <el-radio
                  style="width: 100%; margin: 8px 0"
                  :label="item.isRight"
                  v-for="item in questionDetail.options"
                  :key="item.id"
                  >{{ item.title }}</el-radio
                >
              </el-radio-group>
            </div>
            <!-- 多选选项 -->
            <div v-if="questionDetail.questionType === '2'">
              <el-checkbox
                style="width: 100%; margin: 8px 0"
                :value="Boolean(anwser.isRight)"
                v-for="anwser in questionDetail.options"
                :key="anwser.id"
                >{{ anwser.title }}</el-checkbox
              >
            </div>
          </el-description-item>
        </el-row>
        <!-- 横线 -->
        <el-row>
          <hr />
        </el-row>
        <!-- 参考答案视频 -->
        <el-row>
          <el-description-item label="参考答案" :span="intgcol">
            <el-button type="danger" size="small" @click="show">
              视频答案预览
            </el-button>
            <!-- :src="questionDetail.videoURL" -->
            <!-- 视频 -->
            <div v-if="showVedio">
              <video
                width="320"
                height="240"
                controls
                src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/redminote11pro4515/first.mp4"
                loop="“loop”"
                autoplay="autoplay"
              ></video>
            </div>
          </el-description-item>
        </el-row>
        <!-- 横线 -->
        <el-row>
          <hr />
        </el-row>
        <!-- 答案解析 -->
        <el-row>
          <el-description-item label="答案解析" :span="intgcol">
            <span v-html="questionDetail.answer" style="float: left"></span>
          </el-description-item>
        </el-row>
        <!-- 横线 -->
        <el-row>
          <hr />
        </el-row>
        <!-- 题目备注 -->
        <el-row>
          <el-description-item label="题目备注" :span="intgcol"
            >{{ questionDetail.remarks }}
          </el-description-item>
        </el-row>
      </el-description>
      <el-row type="flex" justify="end">
        <el-col :span="3" :offset="0" style="margin-top: 20px">
          <el-button type="primary" @click="showQst = false">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import { getDifficulty, parseTime } from '@/utils'
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { difficulty, questionType } from '@/api/hmmm/constants'
import SearchQuestion from './components/search-question.vue'
import ElDescription from './components/el-description.vue'
import ElDescriptionItem from './components/el-description-item.vue'
export default {
  components: {
    SearchQuestion,
    ElDescription,
    ElDescriptionItem

  },
  data () {
    return {
      showVedio: false,
      radio: 1,
      intgcol: 24,
      showQst: false,
      params: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      questionList: [],
      questionDetail: {},
      difficulty,
      questionType

    }
  },
  watch: {
    showVedio (newValue) {
      console.log('显示视频')
    }
  },
  created () {
    this.getQuestionlist()
  },
  methods: {
    getDifficulty,
    // 题目预览
    async showQstDia (row) {
      console.log('题目预览')
      this.showQst = true
      const { data } = await detail(row)
      console.log(data)
      this.questionDetail = data
      console.log(this.questionDetail.subjectName)
    },
    show () {
      this.showVedio = true
    },
    closeQstDia () {
      this.showVedio = false
      this.showQst = false
    },
    // 添加精选
    async addChoosen (row) {
      console.log('添加精选')
      try {
        await this.$confirm('此操作将该道题目加入精选,是否继续?', '提示', { type: 'info' })
        console.log('yess')
        row.choiceState = '1'
        const { data } = await choiceAdd(row)
        console.log(data)
        if (data.success) {
          this.$message.success('添加精选成功')
          this.getQuestionlist()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 删除题目
    async delQst (row) {
      this.showDeldia = true

      try {
        await this.$confirm('此操作将删除改题目是否继续?', '提示', { type: 'warning' })
        const { data } = await remove(row)
        console.log(data)
        if (data.success) {
          this.$message.success('删除成功')
          this.getQuestionlist()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑题目
    editQst (row) {
      this.$router.push(`new?id=${row.id}`)
    },
    // 添加题目
    addQuestion () {
      console.log('跳转添加路由')
      this.$router.push('new')
    },
    // 获取题目列表
    async getQuestionlist (param) {
      if (param) {
        console.log(param)
        const map = {}
        for (const key in param) {
          if (param[key]) {
            map[key] = param[key]
          }
        }
        console.log(map)
        const { data } = await list(map)
        this.total = data.counts
        this.questionList = data.items
      } else {
        const { data } = await list(this.params)
        this.total = data.counts
        this.questionList = data.items
      }
      this.questionList.forEach(item => {
        item.difficulty = getDifficulty(difficulty, item.difficulty)
        item.questionType = getDifficulty(questionType, item.questionType)
        item.addDate = parseTime(item.addDate)
      })
      console.log(this.questionList)
    },
    // 翻页
    async changepagesize (currsize) {
      this.params.pagesize = currsize
      const { data } = await list(this.params)
      this.questionList = data.items
      this.total = data.counts
    },
    async changepage (currpage) {
      this.params.page = currpage
      const { data } = await list(this.params)
      this.questionList = data.items
    }
  }
}
</script>

<style lang="scss" scope>
.app-container {
  position: relative;
  .addbtn {
    position: absolute;
    right: 40px;
    width: 100px;
    font-size: 12px;
    padding: 9px 15px;
  }

  .el-table {
    margin: 20px 0;
    .el-button--medium {
      padding: 10px;
      border-radius: 50%;
      font-size: 12px;
    }
  }
  p {
    display: block;
    margin: 0;
  }
}
</style>
